
// 创建变量
let rtc = {
	remoteAudioTrack: null,
    // For the local audio and video tracks.
    localAudioTrack: null,
    localVideoTrack: null,
    client: null,
	screenclient: null,
	screenVideoTrack: null
	
};

let options = {
    // Pass your app ID here.
    appId: "a2a2dca68e9a472d82fd6d7a1eb4f9e9",
    // Set the channel name.
    channel: "123456",
    // Use a temp token
    token: null,
    // Uid
    uid: 88888888,
	uid1: 99999999
};

// 配置跨频道媒体流转发
let channelMediaConfig = AgoraRTC.createChannelMediaRelayConfiguration();
// 设置源频道信息
channelMediaConfig.setSrcChannelInfo({
 channelName: "123456",
 uid:88888888,
 token: null,
});
// 设置目标频道信息，可多次调用，最多设置 4 个目标频道
channelMediaConfig.addDestChannelInfo({
 channelName: "654321",
 uid: 0123,
 token: null,
});


// CDN 推流参数设置。
let LiveStreamingTranscodingConfig = {
  // 用于旁路推流的输出视频流的总宽度 (px)。640 为默认值。
  width: 1920,
  // 用于旁路推流的输出视频流的总高度 (px)。360 为默认值。
  height: 1080,
  // 设置推流输出视频的码率 (Kbps)，默认值为 400。
  videoBitrate: 2080,
  // 用于旁路推流的输出视频的帧率 (fps)。默认值为 15。
  videoFramerate: 15,
  audioSampleRate: 48000,
  audioBitrate: 48,
  audioChannels: 1,
  videoGop: 30,
  // 推流输出视频的编码规格。可以设置为 Baseline (66)、Main (77) 或 High (100)。如果设置其他值，Agora 会统一设为默认值 High (100)。
  videoCodecProfile: 100,
  userCount: 1,
  userConfigExtraInfo: "",
  backgroundColor: 0x000000,
  // 设置水印图片（仅支持在线 PNG 文件），只支持一个水印。
  watermark: {
          url: "http://www.com/watermark.png",
          x: 0,
          y: 0,
          width: 160,
          height: 160,
      },
  // 分配用户视窗的合图布局。
  transcodingUsers: [{
          x: 0,
          y: 0,
          width: 1920,
          height: 1080,
          // 图像所在层数 [1,100]
          zOrder: 0,
		  // 透明度，1完全不透明，取值范围为 [0.0,1.0]
          alpha: 1.0,
          // 下面的 uid 应和 AgoraRTCClient.join 输入的 uid 保持一致。
          uid: 99999999,
        },
		
		{
          x: 1680,
          y: 0,
          width: 240,
          height: 180,
		  // 图像所在层数 [1,100]
          zOrder: 1,
		  // 透明度，1完全不透明，取值范围为 [0.0,1.0]
          alpha: 1.0,
          // 下面的 uid 应和 AgoraRTCClient.join 输入的 uid 保持一致。
          uid: 88888888,
        }],
};


async function startBasicLiveStreaming() {

	    // 屏幕共享
        document.getElementById("screenshare").onclick = async function () {
			
			rtc.screenclient = 	AgoraRTC.createClient({ mode: "live", codec: "vp8" });
			// 设置角色
            rtc.screenclient.setClientRole("host");
            //加入频道
            await rtc.screenclient.join(options.appId, options.channel, options.token, options.uid1);
			// 创建屏幕共享轨道
            rtc.screenVideoTrack = await AgoraRTC.createScreenVideoTrack({
                // 配置屏幕共享编码参数，
                encoderConfig: "1080p",
            });
			// 发布屏幕共享流
            await rtc.screenclient.publish(rtc.screenVideoTrack);
			// mute/unmute视频
            document.getElementById("muteshare").onclick = async function () {
				//console.log("当前屏幕共享mute状态"+rtc.screenVideoTrack.muted);
				if(rtc.screenVideoTrack.muted == false){
					rtc.screenVideoTrack.setMuted(true);
				}else{
					rtc.screenVideoTrack.setMuted(false);
				}
			}
			
			// 创建div节点播放屏幕共享
            const screenPlayerContainer = document.createElement("div");
            screenPlayerContainer.id = options.uid1;
            screenPlayerContainer.textContent = "Local user " + options.uid1;
            screenPlayerContainer.style.width = "640px";
            screenPlayerContainer.style.height = "480px";
            document.body.append(screenPlayerContainer);
            // 播放
            rtc.screenVideoTrack.play(screenPlayerContainer);

            console.log("屏幕共享publish success!");
			
	    }

			
    window.onload = function () {
		
		rtc.client = AgoraRTC.createClient({ mode: "live", codec: "vp8" });
		


		
		
              // 主播身份加入频道
        document.getElementById("host-join").onclick = async function () {
			// 设置角色
            rtc.client.setClientRole("host");
			// 订阅
			huidiao()
			//加入频道
            await rtc.client.join(options.appId, options.channel, options.token, options.uid);
            // 创建本地音频轨道
            rtc.localAudioTrack = await AgoraRTC.createMicrophoneAudioTrack();
			
			// 测试chrome浏览器是否支持调用setPlaybackDevice
			//console.log("222222222222222");
			//rtc.localAudioTrack.setPlaybackDevice(1);
			//console.log("33333333333333333");
			
			// 检测音频轨道是否活跃。
            document.getElementById("checkAudio").onclick = async function () {
			    AgoraRTC.checkAudioTrackIsActive(rtc.localAudioTrack).then(result => {
				
                 //  console.log(`${ "默认 - 麦克风阵列 (英特尔® 智音技术)" } is ${ result ? "available" : "unavailable" }`);
                });
		    }			
            // 创建本地视频轨道
            rtc.localVideoTrack = await AgoraRTC.createCameraVideoTrack();
			
			// 设置直播转码
            rtc.client.setLiveTranscoding(LiveStreamingTranscodingConfig).then(() => {
                console.log("set live transcoding success");
            });
			
            // 发布音视频
            await rtc.client.publish([rtc.localAudioTrack, rtc.localVideoTrack]);
			
            // mute/unmute视频
            document.getElementById("mutevideo").onclick = async function () {
				//console.log("当前视频mute状态"+rtc.localVideoTrack.muted);
				if(rtc.localVideoTrack.muted == false){
					rtc.localVideoTrack.setMuted(true);
				}else{
					rtc.localVideoTrack.setMuted(false);
				}
			}
			// mute/unmute音频
            document.getElementById("muteaudio").onclick = async function () {
				//console.log("当前音频mute状态"+rtc.localAudioTrack.muted);
				if(rtc.localAudioTrack.muted == false){
					rtc.localAudioTrack.setMuted(true);
				}else{
					rtc.localAudioTrack.setMuted(false);
				}
			}
			
			 // setEnabled 视频
            document.getElementById("enable").onclick = async function () {
				
				if(rtc.localVideoTrack.enabled == false){
					rtc.localVideoTrack.setEnabled(true);
				}else{
					rtc.localVideoTrack.setEnabled(false);
				}
			}
			
			

			
            // 创建div节点播放本地视频
            const localPlayerContainer = document.createElement("div");
            localPlayerContainer.id = options.uid;
            localPlayerContainer.textContent = "Local user " + options.uid;
            localPlayerContainer.style.width = "640px";
            localPlayerContainer.style.height = "480px";
            document.body.append(localPlayerContainer);
            // 播放
            rtc.localVideoTrack.play(localPlayerContainer);

            console.log("publish success!");
		}	
		
		
            // 观众身份加入频道
        document.getElementById("audience-join").onclick = async function () {
            rtc.client.setClientRole("audience");
			huidiao()
            await rtc.client.join(options.appId, options.channel, options.token, options.uid);	
	    }

			// 开启美颜
        document.getElementById("setBeautyEffect").onclick = async function () {
            rtc.localVideoTrack.setBeautyEffect(true, {
                lighteningContrastLevel: 1,
                lighteningLevel: 1.0,
                smoothnessLevel: 1.0,
                rednessLevel: 0.1
            }).then(() => { console.log("开启美颜成功!") });  
		}

			// 关闭美颜
        document.getElementById("notsetBeautyEffect").onclick = async function () {
            rtc.localVideoTrack.setBeautyEffect(false, {               
            }).then(() => { console.log("关闭美颜成功!") });  
		}		
		
			// 跨频道转发
        document.getElementById("channelMediaConfig").onclick = async function () {
            rtc.client.startChannelMediaRelay(channelMediaConfig).then(() => {
				
                  console.log(`startChannelMediaRelay success`);
            }).catch(e => {
                    console.log(`startChannelMediaRelay failed`, e);
                })	
	    }
		
		    // 推流到cdn
		document.getElementById("cdn").onclick = async function () {                       
				// 添加推流地址。transcodingEnabled 设置为 true，表示开启转码。
				rtc.client.startLiveStreaming("rtmp://ali-push.broadcastapp.agoraio.cn/live/zhangxu", true).then(() => {
	            // 在浏览器访问如下链接可得到拉流地址：https://uap-token.agoralab.co/v1/rtmp/ali/gen_token?s=emhhbmd4dQ==
                console.log("start live streaming success");
                 })						
	    }	

		    // 停止推流
		document.getElementById("notcdn").onclick = async function () {                       
				// 注意这是一个异步方法，请确保异步操作完成后再进行下一步操作。
                rtc.client.stopLiveStreaming("rtmp://ali-push.broadcastapp.agoraio.cn/live/zhangxu").then(() => {
                   console.log("stop live streaming success");
                 })						
	    }		


		    // 调节远端音量为0  前提得有远端用户加入，否则报错
		document.getElementById("volume").onclick = async function () {        
                    console.log("设置远端音量为0");	
					rtc.remoteAudioTrack.setVolume(0);				
		}
		    // 调节远端音量为100
		document.getElementById("volume1").onclick = async function () {        
                    console.log("设置远端音量为100");		
					rtc.remoteAudioTrack.setVolume(100);				
		}
		    // 调节远端音量为50
		document.getElementById("volume2").onclick = async function () {        
                    console.log("设置远端音量为50");		
					rtc.remoteAudioTrack.setVolume(50);				
		}
		    // 调节远端音量为800，远端音量最高设置为100，这里设置800是和100进行音量比较，其实没有区别
		document.getElementById("volume3").onclick = async function () {        
                    console.log("设置远端音量为800");		
					rtc.remoteAudioTrack.setVolume(800);				
		}

            // 点击leave按钮离开频道
        document.getElementById("leave").onclick = async function () {
			// 判断是否有本地音视频，否的话跳过该步骤，防止只有屏幕共享加入频道，调用leave报错
			if(rtc.localVideoTrack)  {
            // 关闭本地轨道
            rtc.localAudioTrack.close();
            rtc.localVideoTrack.close();
			// 销毁本地div节点
			const localPlayerContainer = document.getElementById(options.uid);
			localPlayerContainer.remove();
			// console.log("1111111111");
			}
			
			// 判断是否有屏幕共享，否的话跳过该步骤
			if(rtc.screenVideoTrack)  {
			// 关闭屏幕共享轨道
			rtc.screenVideoTrack.close();
			// 销毁屏幕共享div节点
			const screenPlayerContainer = document.getElementById(options.uid1);
			screenPlayerContainer.remove();
			}
			
            // 遍历所有远端用户
            rtc.client.remoteUsers.forEach(user => {
                // 销毁动态创建的div节点
                const remotePlayerContainer = document.getElementById(user.uid);
				// console.log(user.uid);
                remotePlayerContainer && remotePlayerContainer.remove();
            });

            // 离开频道
			if (rtc.client){
            await rtc.client.leave();
			}
			if (rtc.screenclient){
			await rtc.screenclient.leave();
			}
        }
    }

}

startBasicLiveStreaming()

async function huidiao() {
	        
				// 监听远端用户推流事件
	            rtc.client.on("user-published", async (user, mediaType) => {
			    //  若是本地屏幕共享的流则不订阅，否则就订阅
				if (user.uid == options.uid1) {
					console.log("本地屏幕共享流不订阅");
				} else {
                // 订阅远端用户
                await rtc.client.subscribe(user, mediaType);
                console.log("subscribe success"+user.uid+mediaType);

                // 订阅的是视频
                if (mediaType === "video") {
                    // 获取远端视频轨
                    const remoteVideoTrack = user.videoTrack;     
                    // 动态创建div节点用来播放视频					
                    const remotePlayerContainer = document.createElement("div");                   
                    remotePlayerContainer.id = user.uid;
                    remotePlayerContainer.textContent = "Remote user " + user.uid;
                    remotePlayerContainer.style.width = "640px";
                    remotePlayerContainer.style.height = "480px";
                    document.body.append(remotePlayerContainer);

                    //播放远端视频
                    remoteVideoTrack.play(remotePlayerContainer);
                }

                // 订阅的是音频
                if (mediaType === "audio") {
                    // 获取远端音频轨
                    rtc.remoteAudioTrack = user.audioTrack;
					
					console.log("555555555555555555");
					rtc.remoteAudioTrack.setPlaybackDevice(1);
					console.log("66666666666666666");
					
                    // 播放远端音频
                    rtc.remoteAudioTrack.play();
					
                }				
				}
            });	
				// 监听远端unpublish事件			
            rtc.client.on("user-unpublished", user => {
                    // 获取远端动态创建的div
                    const remotePlayerContainer = document.getElementById(user.uid);
					//console.log(user.uid);					
                    // 销毁div
                    remotePlayerContainer && remotePlayerContainer.remove();
            });			
	
}

